@extends('admin.layout.layout')
@section('content')
    <div class="black3"></div>
    <div class="col-md-12 mt-2 tree2">
            <div class="tree"  style="margin:0">
                <ul id="tree0"></ul>
            </div>
    </div>

    @component('admin.components.content.formContent')
        @slot('rightContent')

            <form class="form-material mini-form ajaxForm" method="POST" @if(isset($editData)) action="{{url('/admin/role',['id'=>$editData->id])}}" @else action="{{url('/admin/role')}}" @endif)>
                @isset($editData)
                    @method('PUT')
                @endisset
                @csrf
                <div class="body">
                    
                    @component('admin.components.input',['title'=>'角色名称','name'=>'role_name','default'=>isset($editData)?$editData->role_name:''])
                    @endcomponent

                    <div class="readonly showTree">
                        @component('admin.components.input',[
                            'title'=>'可访问菜单（点击选择）',
                            'name'=>'menu_ids',
                            'default'=>isset($editData)?$editData->menu_ids:''
                            ])
                        @endcomponent
                    </div>

                    @component('admin.components.input',['title'=>'排序','name'=>'sort','default'=>isset($editData)?$editData->sort:100,'required'=>'no'])
                    @endcomponent

                </div>
                <button type="submit" class="btn btn-primary mt-2"><i class="icon-arrow_forward mr-2"></i>提交</button>
            </form>

        @endslot
    @endcomponent

    <script>
         var treeData=@json($menuListData);
            treeData.forEach(function(v){
                var has_parent=$("ul#tree"+v['pid']);
                if(has_parent.length>0){
                    if(v['is_resource']){
                        $("ul#tree"+v['pid']).siblings('.tree-c').addClass('resource');
                        var method_name;
                        switch(v.method_name){
                            case 'create':
                                method_name='新增页面';
                            break
                            case 'store':
                                method_name='新增操作';
                            break
                            case 'edit':
                                method_name='编辑页面';
                            break
                            case 'update':
                                method_name='编辑操作';
                            break
                            case 'destroy':
                                method_name='删除操作';
                            break
                        }
                        var resource='<div><div class="custom-control custom-checkbox"><div class="custom-control custom-checkbox"><input type="checkbox" id="menu'+v.id+'" pid="'+v.pid+'" class="custom-control-input menu-id-checkbox"><label class="menu-checkbox custom-control-label d-flex align-items-center" for="menu'+v.id+'">'+method_name+'</label></div></div></div>';
                        $("ul#tree"+v['pid']).siblings('.tree-c').append(resource);
                    }else{
                        var li=document.createElement('li');
                        li.className="flex-column";
                        var div=document.createElement('div');
                        div.style="padding-left:"+((v['level']-1)*30)+"px;width:40%";

                        //icon
                        var i=document.createElement('div');
                        i.innerHTML='<div class="custom-control custom-checkbox"><div class="custom-control custom-checkbox"><input type="checkbox" id="menu'+v.id+'" pid="'+v.pid+'" class="custom-control-input menu-id-checkbox"><label class="menu-checkbox custom-control-label d-flex align-items-center" for="menu'+v.id+'"><i class="icon '+v.icon+'"></i>'+v.menu_name+'</label></div></div>';
                        
                        div.appendChild(i);
                

                        //child
                        var ul=document.createElement('ul');
                        ul.id="tree"+v['id']

                        //box
                        var box=document.createElement('div');

                        box.className="tree-c";
                        
                        box.appendChild(div)
                        li.appendChild(box);
                        li.appendChild(ul);

                        $("ul#tree"+v['pid']).append(li.outerHTML);
                    }
                }
            });
            
            $(".showTree").click(function(){
                $(".black3,.tree2").fadeIn();
            });

            $(".black3").click(function(){
                $(".black3,.tree2").fadeOut();
            });

            var checkbox=$(".tree2 input[type='checkbox']");
            function check(pid,state){
                var child=$(".tree2 input[pid="+pid+"]");
                if(child.length>0){
                    child.each(function(){
                        var id=$(this).attr('id').replace('menu','');
                        $(this).prop('checked',state);
                        var childs=$(".tree2 input[pid="+id+"]");
                        if(childs.length>0){
                            check(id,state);
                        }
                    });
                }
            }   

            $(checkbox).change(function(){
                var id=$(this).attr('id').replace('menu','');
                var state=$(this).is(':checked');
                // alert(state);
                if(id!=0){
                    check(id,state);
                }
                getChecked();
            });

            function getChecked(){
                var ids=[];
                $(".tree2 input:checked").each(function(i,v){
                    var id=$(v).attr('id').replace('menu','');
                    ids.push(id);
                });
                $("input[name='menu_ids']").val(ids).trigger('input');
            }

            function setChecked(){
                var ids=$("input[name='menu_ids']").val();
                if(ids){
                    var idsArr=ids.split(',');
                    idsArr.forEach(function(v){
                        $(".tree2 input[id='menu"+v+"']").prop('checked',true);
                    });
                };
            }
            setChecked();

    </script>
@endsection